Micron Document
baubs git

Node / mirrors / respira / commits / b995eb8

Commit b995eb898ef1d7293335baadded5dad218f6667a

󰉖 Browse tree at this commit

Parents : 9337fdf
Author : Jan-Henrik Bruhn <jan-henrik.bruhn@offis.de>
Date : 2025-12-22T11:11:47+01:00

fix: Update PatternInfoSkeleton to match actual PatternInfo layout

Replace generic key-value skeleton with a proper representation that matches the actual PatternInfo component structure:
- Three-column grid for Size, Stitches, and Colors stats
- Separator line between sections
- Color swatches row with circular placeholders

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>

Changes

1 files changed, 27 insertions(+), 7 deletions(-)

M src/components/SkeletonLoader.tsx +27 -7

Diff

diff --git a/src/components/SkeletonLoader.tsx b/src/components/SkeletonLoader.tsx
index 3da170d..491a362 100644
--- a/src/components/SkeletonLoader.tsx
+++ b/src/components/SkeletonLoader.tsx
@@ -65,16 +65,36 @@ export function PatternCanvasSkeleton() {
export function PatternInfoSkeleton() {
return (
- <div className="mt-4">
- <SkeletonLoader className="h-6 w-40 mb-4" variant="text" />
- <div className="bg-gray-200 dark:bg-gray-900 p-4 rounded-lg space-y-3">
- {[1, 2, 3, 4].map((i) => (
- <div key={i} className="flex justify-between">
- <SkeletonLoader className="h-4 w-24" variant="text" />
- <SkeletonLoader className="h-4 w-32" variant="text" />
+ <div className="mb-3">
+ {/* Three column grid matching PatternInfo stats */}
+ <div className="grid grid-cols-3 gap-2 text-xs mb-2">
+ {[1, 2, 3].map((i) => (
+ <div
+ key={i}
+ className="bg-gray-200 dark:bg-gray-700/50 p-2 rounded"
+ >
+ <SkeletonLoader className="h-3 w-12 mb-1" variant="text" />
+ <SkeletonLoader className="h-4 w-16" variant="text" />
</div>
))}
</div>
+
+ {/* Separator */}
+ <div className="h-px bg-gray-200 dark:bg-gray-700 mb-3" />
+
+ {/* Color swatches row */}
+ <div className="flex items-center gap-2 mb-2">
+ <SkeletonLoader className="h-3 w-12" variant="text" />
+ <div className="flex gap-1">
+ {[1, 2, 3, 4, 5].map((i) => (
+ <SkeletonLoader
+ key={i}
+ className="w-3 h-3 rounded-full"
+ variant="circle"
+ />
+ ))}
+ </div>
+ </div>
</div>
);
}

Served by rngit 1.3.3 - Generated in 0.05s